• 將 SASS 文件拆分為多個小的、可重複使用的模塊（modules），每個模塊負責單獨的功能或樣式，這樣可以讓樣式更具結構化、易於維護和重複使用

• 步驟：

1. 創建主樣式文件：創建一個主入口文件（如 main.scss），其中包含所有模塊的引入語句
2. 創建變量和配置文件：定義變量、函數和混合器（如 variables.scss），供其他文件使用
3. 模塊化文件夾結構：

• Base：包含重置、標準化和基本 HTML 樣式設置
• Layout：布局相關的樣式，如頭部、導航、側邊欄、頁腳等
• Components：獨立的 UI 元件樣式，如按鈕、卡片、表單等
• Utilities：通用的工具類樣式，如文本對齊、隱藏元素、邊距控制等

4. @import 語句組合：在主樣式文件中使用 @import 或 @use 將這些模塊組合到一起

// main.scss
@use 'base';
@use 'layout';
@use 'components';

• 注意 : 謹慎管理模塊之間的依賴，過於複雜的依賴關係會使得模塊難以管理

• 特別之處：模塊化架構能夠提高程式碼的可維護性，讓開發者可以重複使用已經定義好的樣式，並且文件結構清晰

• 應用

1. 大型項目：例如企業網站、電子商務平台等，這些項目通常具有複雜的樣式結構，模塊化可以幫助維護和更新樣式
2. 設計系統：在構建可重複使用的 UI 元素庫時，模塊化能夠提供一致的風格和功能

• BEM 是什麼

1. BEM（Block Element Modifier）是一種 CSS 命名規則，旨在提高程式碼的可讀性和重用性
2. 將樣式分為三個部分：

• Block（區塊）：獨立且可重用的 UI 組件（如 button）

• Element（元素）：區塊的子元素，依賴於區塊存在（如 buttonicon）

• Modifier（修飾符）：修改區塊或元素的外觀或行為（如 button--primary）**

• 命名規則
  區塊：.block
  元素：.blockelement
  修飾符：.block--modifier

• 特點

1. 結構清晰：每個類名都明確表達其作用
2. 重複使用性高：可以輕鬆修改區塊的變體樣式
3. 組織化：使得大型項目更容易管理